import React, { Component } from 'react'

export class Sub extends Component {
    render() {
        return (
            <div>
                <p>x:{this.props.x} y:{this.props.y}</p>
            </div>
        )
    }
}

export class SubButton extends Component {
    render() {
        return (
            <div>
                 <button>x:{this.props.x} y:{this.props.y}</button>
            </div>
        )
    }
}

const reZize = (Com) => {
    return  class Hoc extends Component {
        state={
            x:document.documentElement.clientWidth,
            y:document.documentElement.clientHeight
        }
        componentDidMount(){
            //resize是当你页面大小发生改变 会触发resize
            window.addEventListener("resize",this.getpostion.bind(this))
        }
        //卸载
        componentWillUnmount(){
            window.removeEventListener("resize",this.getpostion.bind(this))
        }
        getpostion(){
            this.setState({
                x:document.documentElement.clientWidth,
                y:document.documentElement.clientHeight
            })
        }
        render() {
            return (
                <Com {...this.state}/> 
            )
        }
    }
}

const A = reZize(Sub)
const B = reZize(SubButton)

export class Hoc extends Component {
    render() {
        return (
            <div>
                <A/>
                <B/>
            </div>
         
        )
    }
}

export default Hoc
